<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 周报管理 </el-breadcrumb-item>
                <el-breadcrumb-item>下载周报</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-upload
                class="upload-demo"
                drag
                action="#"
                :limit="limitNum"
                :on-exceed="handleExceed"
                :on-change="filechange"
                :on-remove="handleRemove"
                :on-success="success"
                multiple
                ref="upload"
                :auto-upload="false">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">将您的文件上传到文件助手，可以更加方便、简介、安全</div>
            </el-upload>
            <div class="bto">
                <el-button v-if="state==0" class="upload" type="primary" @click="submitUpload">上传文件到服务器</el-button>
                <el-button v-else-if="state==2" class="upload" type="primary" :disabled="true">正在上传文件,请稍后</el-button>
            <el-button v-else class="upload" type="primary" :disabled="true">文件上传已达上限</el-button>
            </div>
            <div class="textDiv">
                <span class="text">成为会员享有更大的文件上传空间,让您获得更好的体验!</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        success(files,fileList){
            fileList = []
        },
        handleRemove(files,fileList){
            console.log(fileList);
        },
        filechange(files, fileList){
            this.file = files.raw;
            var data = {
                file:this.file
            }
            this.fileList.push(data)
            console.log(this.fileList);
            // console.log(this.$refs['upload']);
        },
        submitUpload(){
            //先判断用户是否添加文件
            if (this.fileList != "" && this.fileList != []) {
                //上传文件
            let that = this
            this.state = 2
            var formData = new FormData();
            for(var i=0;i<this.fileList.length;i++){
                formData.append("file",this.fileList[i].file)
            }
            formData.append("uid",JSON.parse(localStorage.getItem("ms_username")).uid)
            this.$axios
                .post(
                    'http://localhost:8080/file/upload',formData,
                
                    {
                        headers: { 'Content-Type': 'multipart/form-data' } //加上这个
                    }
                )
                .then(res=>{
                    console.log(res);
                    that.state = 0
                    that.$refs.upload.clearFiles()
                    that.fileList=[]
                    that.success()
                    that.$message.success('上传文件成功');
                    that.$axios({
                        method: 'post',
                        url: 'http://localhost:8080/user/filecount',
                        data: {
                            uid:JSON.parse(localStorage.getItem("ms_username")).uid
                            },
                        // headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                            })
                            .then(res=>{
                                console.log(res);
                                localStorage.setItem("filecount",res.data.data)
                                that.$emit("test")
                                //判断用户上传文件是否达到上限
                                if (localStorage.getItem("roles") == "null") {
                                    console.log("普通用户");
                                    if(localStorage.getItem("filecount")>=30){
                                        localStorage.setItem("shangxian",1)
                                        that.state = 1
                                    }
                                }else if(localStorage.getItem("roles") == 1){
                                    if(localStorage.getItem("filecount")>=100){
                                        console.log("高级会员");
                                        localStorage.setItem("shangxian",1)
                                        that.state = 1
                                    }
                                }else{
                                    console.log("管理员");
                                }
                            });
                })
            }else{
                this.$message({
                message: '请添加文件',
                type: 'warning'
            });
            }
        },
        handleExceed(files, fileList) {
            this.$message({
                message: '文件最多同时上传六个',
                type: 'warning'
            });
        },
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            // 通过 `vm` 访问组件实例
            if(vm.num2 = localStorage.getItem("shangxian") == 1){
                vm.state = 1
            }
        })
    },
    created: function () {
        //页面加载时判断用户文件是否上限
        if (localStorage.getItem("roles") == "null") {
            if(localStorage.getItem("filecount")>=30){
                localStorage.setItem("shangxian",1)
                that.state = 1
            }
        }else if(localStorage.getItem("roles") == 1){
            if(localStorage.getItem("filecount")>=100){
                localStorage.setItem("shangxian",1)
                that.state = 1
            }
        }else{
            console.log("身份是管理员");
        }
    },
    data() {
        return {
            limitNum: 6,
            file:"",
            fileList:[],
            state:0,
        };
    }
};
</script>

<style scoped>
.input1 {
    width: 200px;
}
.table1 {
    width: 80%;
    margin: auto;
}
.div2 {
    text-align: center;
    margin-top: 30px;
}
.upload{
    /* margin-left: 150px; */
    text-align: center;
}
.bto{
    text-align: center;
    margin-top: 50px;
}
.upload-demo{
    margin-top: 80px;
    text-align: center;
}
.text{
    color: gray;
}
.textDiv{
    text-align: center;
    font-size: 20px;
    margin-top: 30px;
}
</style>
